<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			body {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.label {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			姓名：<input type="text" v-model="name">
			<div class="label">你的名字是:{{name}}</div>
			密码：<input type="text" v-model="password">
			<div class="label">你的名字是:{{password}}</div>
			<button @click="handle">提交</button>
		</div>
		    
		<script>
			var exam = new Vue({
				el: "#app",
				data: {
					name: '',
					password: ''
				},
				methods: {
					handle() {
						console.log(123);
						alert("姓名：" + this.name + '\n\n' + '密码：' + this.password)
					}
				}
			})
		</script>    
	</body>
</html>
